<template>
	<div class="player-view">
		<div class="player-container">
			<div class="player-box">
				<h1 class="title">音乐播放器</h1>

				<!-- 音乐信息 -->
				<div class="music-info">
					<img :src="currentSong.cover" alt="封面" class="cover-image" />
					<h2 class="song-title">{{ currentSong.title }}</h2>
					<p class="artist">{{ currentSong.artist }}</p>
				</div>

				<!-- 歌词显示区域 -->
				<div class="lyrics-container">
					<div class="lyrics-wrapper" ref="lyricsWrapper">
						<p
							v-for="(line, index) in currentSong.lyrics"
							:key="index"
							:class="{ active: currentLyricIndex === index }"
							class="lyric-line"
							@click="seekToTime(line.time)"
						>
							{{ line.text }}
						</p>
					</div>
				</div>

				<!-- 播放控制 -->
				<div class="controls">
					<div class="progress-bar">
						<div class="progress" :style="{ width: progress + '%' }"></div>
					</div>
					<div class="time-info">
						<span>{{ formatTime(currentTime) }}</span>
						<span>{{ formatTime(duration) }}</span>
					</div>
					<div class="control-buttons">
						<button @click="prevSong" class="control-btn">
							<i class="fas fa-step-backward"></i>
						</button>
						<button @click="togglePlay" class="control-btn play-btn">
							<i :class="isPlaying ? 'fas fa-pause' : 'fas fa-play'"></i>
						</button>
						<button @click="nextSong" class="control-btn">
							<i class="fas fa-step-forward"></i>
						</button>
					</div>
					<p>123213</p>
					<p>123213</p>
					<p>123213</p>
					<p>123213</p>
					<p>123213</p>
					<p>123213</p>
					<p>123213</p>
					<p>123213</p>
					<p>哇哈哈</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 模拟歌曲数据
const songs = [
	{
		title: '示例歌曲 11',
		artist: '艺术家 1',
		cover: 'https://picsum.photos/200',
		audio: 'https://example.com/song1.mp3',
		lyrics: [
			{ time: 0, text: '这是第一行歌词' },
			{ time: 5, text: '这是第二行歌词' },
			{ time: 10, text: '这是第三行歌词' },
			{ time: 15, text: '这是第四行歌词' },
		],
	},
	{
		title: '示例歌曲 2',
		artist: '艺术家 2',
		cover: 'https://picsum.photos/200',
		audio: 'https://example.com/song2.mp3',
		lyrics: [
			{ time: 0, text: '这是第一行歌词' },
			{ time: 5, text: '这是第二行歌词' },
			{ time: 10, text: '这是第三行歌词' },
			{ time: 15, text: '这是第四行歌词' },
		],
	},
];

const currentSongIndex = ref(0);
const currentSong = ref(songs[0]);
const isPlaying = ref(false);
const currentTime = ref(0);
const duration = ref(0);
const volume = ref(100);
const currentLyricIndex = ref(0);
const audio = ref(null);
const lyricsWrapper = ref(null);

// 初始化音频播放器
onMounted(() => {
	audio.value = new Audio(currentSong.value.audio);
	audio.value.addEventListener('timeupdate', updateProgress);
	audio.value.addEventListener('loadedmetadata', () => {
		duration.value = audio.value.duration;
	});
});

// 清理资源
onUnmounted(() => {
	if (audio.value) {
		audio.value.pause();
		audio.value.removeEventListener('timeupdate', updateProgress);
	}
});

// 更新进度
const updateProgress = () => {
	currentTime.value = audio.value.currentTime;
	progress.value = (currentTime.value / duration.value) * 100;

	// 更新当前歌词
	const currentTimeMs = currentTime.value * 1000;
	currentLyricIndex.value = currentSong.value.lyrics.findIndex((line, index) => {
		const nextLine = currentSong.value.lyrics[index + 1];
		return line.time <= currentTimeMs && (!nextLine || nextLine.time > currentTimeMs);
	});
};

// 播放/暂停
const togglePlay = () => {
	if (isPlaying.value) {
		audio.value.pause();
	} else {
		audio.value.play();
	}
	isPlaying.value = !isPlaying.value;
};

// 上一首
const prevSong = () => {
	currentSongIndex.value = (currentSongIndex.value - 1 + songs.length) % songs.length;
	changeSong();
};

// 下一首
const nextSong = () => {
	currentSongIndex.value = (currentSongIndex.value + 1) % songs.length;
	changeSong();
};

// 切换歌曲
const changeSong = () => {
	currentSong.value = songs[currentSongIndex.value];
	audio.value.src = currentSong.value.audio;
	audio.value.play();
	isPlaying.value = true;
};

// 跳转到指定时间
const seekToTime = time => {
	audio.value.currentTime = time;
};

// 格式化时间
const formatTime = time => {
	const minutes = Math.floor(time / 60);
	const seconds = Math.floor(time % 60);
	return `${minutes}:${seconds.toString().padStart(2, '0')}`;
};

// 计算进度
const progress = ref(0);
</script>

<style scoped>
.player-view {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

.player-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: linear-gradient(45deg, #000000, #2c3e50);
	animation: gradientAnimation 15s ease infinite;
	background-size: 400% 400%;
}

@keyframes gradientAnimation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.player-box {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	padding: 40px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	animation: fadeIn 1s ease;
	width: 400px;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.title {
	color: #fff;
	margin-bottom: 20px;
	font-size: 24px;
}

.music-info {
	margin-bottom: 20px;
}

.cover-image {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	margin-bottom: 15px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.song-title {
	color: #fff;
	margin: 10px 0;
	font-size: 20px;
}

.artist {
	color: rgba(255, 255, 255, 0.7);
	margin: 5px 0;
}

.lyrics-container {
	height: 200px;
	overflow-y: auto;
	margin: 20px 0;
	padding: 10px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}

.lyrics-wrapper {
	padding: 10px;
}

.lyric-line {
	color: rgba(255, 255, 255, 0.7);
	margin: 10px 0;
	cursor: pointer;
	transition: all 0.3s ease;
}

.lyric-line:hover {
	color: #fff;
}

.lyric-line.active {
	color: #007bff;
	font-size: 1.1em;
	font-weight: bold;
}

.controls {
	margin-top: 20px;
}

.progress-bar {
	width: 100%;
	height: 4px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	margin-bottom: 10px;
	cursor: pointer;
}

.progress {
	height: 100%;
	background: #007bff;
	border-radius: 2px;
	transition: width 0.1s linear;
}

.time-info {
	display: flex;
	justify-content: space-between;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	margin-bottom: 10px;
}

.control-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-bottom: 10px;
}

.control-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.control-btn:hover {
	color: #007bff;
}

.play-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #007bff;
	display: flex;
	justify-content: center;
	align-items: center;
}

.play-btn:hover {
	background: #0056b3;
	color: #fff;
}

.volume-control {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}

.volume-slider {
	flex: 1;
	height: 4px;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	outline: none;
}

.volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
}
</style>
